/* === Calendar === */
.weui-picker-calendar {
    background: #fff;
    height: 15rem;
    width: 100%;
    overflow: hidden;
    .picker-modal-inner {
        overflow: hidden;
        height: 12.8rem;
    }
}

.picker-calendar-week-days {
    height: .9rem;
    background: #f7f7f8;
    .flexbox();
    .hairline(bottom, #c4c4c4);
    font-size: 11px;
    box-sizing: border-box;
    position: relative;
    .picker-calendar-week-day {
        .flex-shrink(1);
        width: 100% / 7;
        width: ~"-webkit-calc(100% / 7)";
        width: ~"-moz-calc(100% / 7)";
        width: ~"calc(100% / 7)";
        line-height: 17px;
        text-align: center;
    }
    + .picker-calendar-months {
      height: 11.9rem;
    }
}
.picker-calendar-months {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.picker-calendar-months-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: 300ms;
}
.picker-calendar-month {
    .flexbox();
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.picker-calendar-row {
    height: 100% / 6;
    height: ~"-webkit-calc(100% / 6)";
    height: ~"-moz-calc(100% / 6)";
    height: ~"calc(100% / 6)";
    .flexbox();
    .flex-shrink(1);
    width: 100%;
    position: relative;
    .hairline(bottom, #ccc);
    
}
.weui-picker-modal .picker-calendar-row:last-child {
  .hairline-remove(bottom);
}
.picker-calendar-day {
    .flex-shrink(1);
    .flexbox();
    .justify-content(center);
    .align-items(center);
    box-sizing: border-box;
    width: 100% / 7;
    width: ~"-webkit-calc(100% / 7)";
    width: ~"-moz-calc(100% / 7)";
    width: ~"calc(100% / 7)";
    text-align: center;
    color: #3d4145;
    font-size: 15px;
    cursor: pointer;
    &.picker-calendar-day-weekend {
    }
    &.picker-calendar-day-prev, &.picker-calendar-day-next {
        color: #ccc;
    }
    .picker-calendar-month-prev &, .picker-calendar-month-next & {

    }
    &.picker-calendar-day-disabled {
        color: #d4d4d4;
        cursor: auto;
    }
    &.picker-calendar-day-today span {
        background: #e3e3e3;
    }
    &.picker-calendar-day-selected span {
        background: @color-primary;
        color:#fff;
    }
    span {
        display: inline-block;
        border-radius: 100%;
        width: 30px;
        height: 30px;
        line-height: 30px;

    }
}
.picker-calendar-month-picker, .picker-calendar-year-picker {
    .flexbox();
    .align-items(center);
    .justify-content(space-between);
    width: 50%;
    max-width: 200px;
    .flex-shrink(10);
    a.icon-only {
        min-width: 36px;
    }
    span {
        .flex-shrink(1);
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
// Inline and popover borders
.popover .picker-calendar, .picker-calendar.picker-modal-inline {
    .picker-calendar-week-days {
        background: none;
    }
    .toolbar, .picker-calendar-week-days {
        .hairline-remove(top);
        .hairline-remove(bottom);
    }
    .toolbar ~ .picker-modal-inner .picker-calendar-months,  .picker-calendar-week-days ~ .picker-calendar-months {
        .hairline(top, #c4c4c4);
    }
}


//修复Android 4.1 上 toolbar元素宽度错误
//因为它不能对 inline 的元素设置宽度
.picker-calendar-month-picker, .picker-calendar-year-picker {
  display: block;
  line-height: 2.2rem;
  flex: 1;

  a.icon-only {
    float: left;
    width: 25%;
    height: 2.2rem;
    line-height: 2rem;  //不知道为什么 2.2rem 无法上下对齐；
  }
  .current-month-value, .current-year-value {
    float: left;
    width: 50%;
    height: 2.2rem;
  }
}



i.icon {
  display: inline-block;
  vertical-align: middle;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  font-style: normal;
  position: relative;
  
  &.icon-next, &.icon-prev {
    width: 0.75rem;
    height: 0.75rem;
  }

  &.icon-next {
    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#04BE02' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
  }
  &.icon-prev {
    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#04BE02' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
  }
}
